<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-wrap-rules-flow" style="position:relative; top:0; left:0; right:0; bottom:0; width:inherit; height:100%;">
  <!-- title -->
  <div class="ddp-box-title">
    <ul class="ddp-rule-tab">
      <li [ngClass]="{ 'ddp-selected': 0 === tabNumber }" (click)="changeTab(0)">
        <a href="javascript:">{{'msg.dp.btn.tab.rule' | translate }} ({{ruleList.length}})</a>
      </li>
      <li [ngClass]="{ 'ddp-selected': 1 === tabNumber }" (click)="changeTab(1)">
        <a href="javascript:">{{'msg.dp.btn.tab.snapshot' | translate }} ({{snapshotList?.length || 0}})
        </a>
      </li>
    </ul>
    <div class="ddp-ui-buttons" *ngIf="0 === tabNumber">
      <a href="javascript:" class="ddp-icon-refresh" (click)="transformAction('UNDO')" [ngClass]="{'ddp-disabled': !undoable}"></a>
      <a href="javascript:" class="ddp-icon-refresh2" (click)="transformAction('REDO')" [ngClass]="{'ddp-disabled': !redoable}"></a>
    </div>
  </div>
  <!-- //title -->

  <div class="ddp-wrap-tab-cntents">
    <!-- RULE TAB -->
    <div class="ddp-ui-rule-flow" *ngIf="0 === tabNumber">
      <ul class="ddp-list-rule2">

        <li *ngFor="let rule of ruleList; let idx = index"
            (click)="jumpRule(idx)"
            [ngClass]="{'ddp-disabled2':rule.isValid, 'ddp-selected': (idx === selectedRuleIdx), 'ddp-edit' : isDisableHover(idx) }">

          <div class="ddp-view-data" [ngClass]="{'ddp-edit': rule.isEditMode }" >
            <span class="ddp-data-type">
              <em class="ddp-ui-round">{{rule.alias}}</em>
            </span>
            <div class="ddp-ui-code"
                 [ngClass]="{'ddp-error':!rule.valid}"
                 title="{{idx !== 0 ? rule.ruleString : null}}">
              {{rule.simplifiedRule}}
            </div>
            <div class="ddp-ui-edit-button" *ngIf="idx !== 0">
              <span class="ddp-btn-icon" (click)="$event.stopImmediatePropagation(); editRule(rule)">
                <em class="ddp-icon-edit"></em>
              </span>
              <span class="ddp-btn-icon" (click)="$event.stopImmediatePropagation(); deleteRule(idx)">
                <em class="ddp-icon-del"></em>
              </span>
              <span class="ddp-btn-link">
                <a href="javascript:" class="ddp-link-cancel"
                   (click)="$event.stopImmediatePropagation(); cancelEditMode(rule, idx)">{{'msg.comm.btn.cancl' | translate }}</a>
              </span>
            </div>
            <!-- //button -->
            <!-- tooltip -->
            <!--<div class="ddp-ui-tooltip-info" *ngIf="idx !== 0">-->
              <!--<em class="ddp-icon-view-top"></em>-->
              <!--{{rule.ruleString}}-->
            <!--</div>-->
            <!-- //tooltip -->
          </div>
          <div class="ddp-wrap-line-add " [ngClass]="{'ddp-selected' : rule.isInsertStep}" *ngIf="!rule.isEditMode">
            <div class="ddp-line-add">
              <span class="ddp-txt"
                    (click)="$event.stopImmediatePropagation();
                    insertStep(rule)">
                {{ 'msg.dp.btn.insert.rule' | translate }}
              </span>
            </div>
            <!-- info -->
            <div class="ddp-input-info">
              {{'msg.dp.ui.insert.rule.below' | translate }}
              <a href="javascript:"
                 class="ddp-link-cancel"
                 (click)="$event.stopImmediatePropagation();
                 cancelInsertMode(rule, idx)">
                {{'msg.comm.btn.cancl' | translate }}
              </a>
            </div>
            <!-- //info -->
          </div>
        </li>
      </ul>
    </div>
    <!-- //RULE TAB -->

    <!-- SNAPSHOT TAB -->
    <div class="ddp-ui-rule-flow" *ngIf="1 === tabNumber">
      <div class="ddp-ui-empty" *ngIf="snapshotList?.length === 0">
        {{'msg.dp.ui.no.snapshot.history' | translate}}
      </div>
      <ul class="ddp-list-snapshot" *ngIf="snapshotList?.length > 0 ">
        <li *ngFor="let snapshot of snapshotList">


          <div class="ddp-txt-snapshot" (click)="snapshotDetail(snapshot)"
               [ngClass]="{'ddp-disabled':snapshot.isCancel || snapshot.status === snapshotStatus.NOT_AVAILABLE}">
            <em class="ddp-icon-snap-{{getSnapshotStatus(snapshot.status.toString())[1]}}"></em>
            <div class="ddp-data-det">
              <div class="ddp-data-status type-{{getSnapshotStatus(snapshot.status.toString())[1]}}">
                {{getSnapshotStatus(snapshot.status.toString())[0]}}
              </div>
              <div class="ddp-data-name">
                <svg-icon-component [name]="getSvgName(snapshot)" [isBlackAndWhite]="true"></svg-icon-component>

                <span class="ddp-txt-name">{{snapshot.ssName}}</span>
              </div>
              <div class="ddp-data-date">
                {{snapshot.createdTime | mdate : 'YYYY-MM-DD HH:mm:ss'}}
              </div>
            </div>

          <!--</div>-->

          <!--<div class="ddp-txt-snapshot"-->
               <!--(click)="snapshotDetail(snapshot)"-->
               <!--[ngClass]="{'ddp-disabled':snapshot.isCancel || snapshot.status === snapshotStatus.NOT_AVAILABLE}">-->

            <!--<em class="ddp-icon-snap-{{getSnapshotStatus(snapshot.status.toString())[1]}}"></em>-->

            <!--&lt;!&ndash;Information&ndash;&gt;-->
            <!--<div class="ddp-data-det">-->
              <!--<div class="ddp-data-status type-{{getSnapshotStatus(snapshot.status.toString())[1]}}">-->
                <!--{{getSnapshotStatus(snapshot.status.toString())[0]}}-->
              <!--</div>-->
              <!--<div class="ddp-data-name">-->
                <!--&lt;!&ndash;-->
                <!--<span class="ddp-tag-type">{{getSnapshotType(snapshot.ssType)}}</span>-->
                <!--&ndash;&gt;-->
                <!--<span class="ddp-tag-type">{{prepCommonUtil.getSnapshotType(snapshot.ssType)}}</span>-->
                <!--{{snapshot.ssName}}-->
              <!--</div>-->
              <!--<div class="ddp-data-date">{{snapshot.createdTime | mdate : 'YYYY-MM-DD HH:mm:ss'}}</div>-->
            <!--</div>-->
            <!--&lt;!&ndash;Information&ndash;&gt;-->

            <!--Progress bar-->
            <div class="ddp-wrap-progress" *ngIf="getSnapshotStatus(snapshot.status.toString())[0] === 'Preparing'">
              <div class="ddp-ui-progress ddp-play">
                <span class="ddp-bar"
                      [ngStyle]="{'width': (snapshot.ruleCntDone * 100 / (snapshot.ruleCntTotal + 1)) + '%'}">
                </span>
              </div>
              <a href="javascript:"
                 class="ddp-btn-cancel"
                 *ngIf="!snapshot.elapsedTime"
                 (click)="$event.stopImmediatePropagation();
                 onSsCancelClick(snapshot)">
              </a>
            </div>
            <!-- //Progress bar-->

          </div>

          <!--Cancel popup-->
          <div class="ddp-txt-cancel" *ngIf="snapshot.isCancel">
            <span class="ddp-txt-det">{{'msg.dp.ui.snapshot.cancel.confirm' | translate }}</span>
            <a href="javascript:"
               class="ddp-btn-line"
               (click)="closeSsCancelPopup(snapshot)">
              {{'msg.dp.ui.no' | translate}}
            </a>
            <a href="javascript:" class="ddp-btn-solid ddp-bg-black"
               (click)="cancelSnapshotConfirm(snapshot)">
              {{'msg.dp.ui.yes' | translate}}
            </a>
          </div>
          <!--Cancel popup-->

        </li>
      </ul>
      <div class="ddp-ui-link">
        <a href="javascript:" class="ddp-btn-line ddp-link-list" (click)="goToSnapshotList()">
          <em class="ddp-icon-go"></em>
          {{ 'msg.dp.btn.snapshot-list' | translate }}
        </a>
      </div>

    </div>
    <!-- //SNAPSHOT TAB -->
  </div>
</div>
